setPage()
let a

//手机获取焦点时候给个判断
$('[name="phone"]').focus(() => {
    $('[name="phone"]').css('outline', '1px solid red')
})
//失去时再获取一个
$('[name="phone"]').blur(() => {
    $('[name="phone"]').css('outline', '1px solid black')
})


//给保存添加点击事件
$('[name="save"]').click(function () {

    //获取各个input的值

    let name = $('[name="name"]').val();
    let phone = $('[name="phone"]').val();
    let edu = $('[name="edu"]').val();
    let age = $('[name="age"]').val();
    let esalary = $('[name="esalary"]').val();

    if (name === '' || phone === '' || edu === '' || age === '' || esalary === '') {
        window.alert('不可以输入空值哦');
        return;
    }

    //生成一个对象
    let obj = { name: name, phone: phone, edu: edu, age: age, esalary: esalary };

    // console.log(obj)
    //获取本地的localstorage
    let mes = window.localStorage.mes;
    //判断是否是不是没有
    //如果没有以数组形式存储对象
    if (mes === undefined) {
        //转化为json字符串
        obj = JSON.stringify([obj])
        //存储到localStorage中
        window.localStorage.mes = obj;


    } else {
        //如果有localStorage中有数组
        //在数组首位插入新对象
        mes = JSON.parse(mes)
        mes.unshift(obj)

        window.localStorage.mes = JSON.stringify(mes)

    }

    setPage();

})


//编辑删除
const oTbody = document.querySelector('tbody')
//事件委托给删除按钮添加点击事件
oTbody.addEventListener('click', function (event) {

    let mes = JSON.parse(window.localStorage.mes);

    // console.log(event.target.getAttribute('name'))
    // console.log(event.target.getAttribute('class'))

    //当点击的是删除时
    //循环遍历找出手机号码一致的 删除那个数据
    if (event.target.getAttribute('name') === 'del') {

        if (window.confirm('你确定要删除吗')) {

            for (let i = 0; i <= mes.length - 1; i++) {

                if (mes[i].phone === event.target.getAttribute('class')) {
                    mes.splice(i, 1)
                }

            }


        }




        //再次上传新的数据
        window.localStorage.mes = JSON.stringify(mes)
        //生成页面
        setPage()




        //当点击的是重置时
    } else if (event.target.getAttribute('name') === 'resset') {

        $('div').css('display', 'block')
        a = event.target.getAttribute('id')



    }





})

//当点击
$('[name="rsave"]').click(function () {


    let mes = JSON.parse(window.localStorage.mes);

    let name = $('[name="rname"]').val();
    let phone = $('[name="rphone"]').val();
    let edu = $('[name="redu"]').val();
    let age = $('[name="rage"]').val();
    let esalary = $('[name="resalary"]').val();

    for (let i = 0; i <= mes.length - 1; i++) {

        if (mes[i].phone === a) {

            mes[i].name = name;
            mes[i].phone = phone;
            mes[i].edu = edu;
            mes[i].age = age;
            mes[i].esalary = esalary;


        }
        if (name === '' || phone === '' || edu === '' || age === '' || esalary === '') {
            window.alert('不可以输入空值哦');
            return;
        }
        console.log(name)
        //再次上传新的数据
        window.localStorage.mes = JSON.stringify(mes)
        //生成页面
        setPage()






    }
    $('div').css('display', 'none')




})

//拖拽效果


// const oDiv = document.querySelector('div')

// oDiv.addEventListener('mousedown', function () {

//     oDiv.addEventListener('mousemove', function fun (event) {

//         let oDivLeft = oDiv.offsetLeft;

//         let oDivTop = oDiv.offsetTop;

//         let oDivWidth = oDiv.clientWidth;

//         let oDivHeight = oDiv.clientHeight;





//         // var x = event.pageX
//         oDiv.style.left = event.pageX - oDivLeft/2+ 'px'
//         oDiv.style.top = event.pageY - oDivTop/2 + 'px'




//     })

// })

// oDiv.addEventListener('mousedown', function (){

//     oDiv.removeEventListener('mousemove' ,fun)

// })


//定义一个函数动态生成页面
function setPage() {

    //获取本地localStorage中的数据

    let mes = window.localStorage.mes;

    if (mes === undefined) {
        let arr = []
        window.localStorage.mes = JSON.stringify(arr)


    } else {

        mes = JSON.parse(mes);

    }


    //当是空数组的时候
    if (mes.length === 0) {

        $('tbody').html(`<tr><td colspan="6">空空如也</td></tr>`)

    } else {

        // console.log(mes)

        //循环数组

        let str = ``

        mes.forEach(item => {

            str += `
            <tr>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.edu}</td>
                <td>${item.age}</td>
                <td>${item.esalary}</td>
                <td><button name="del" class="${item.phone}">删除</button><button name="resset" id="${item.phone}">重置</button></td>
            </tr>
            `
        });
        //写入tbody中
        $('tbody').html(str)

    }


}